<template>
    <div>
        <h3>角色列表</h3>
        <!-- 面包屑导航区 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="#/welcome">商品管理</a></el-breadcrumb-item>
            <el-breadcrumb-item>分类参数</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 简单卡片 -->
        <el-card>
            <!-- 提示警告 -->
            <el-alert title="注意：只允许为第三级分类设置相关参数" type="warning" show-icon :closable="false">
            </el-alert>

            <!-- 选择商品分类区域 -->
            <el-row class="cat_opt">
                <el-col>
                    <span>选择商品分类：</span>
                    <!-- 选择商品分类的级联选择框 -->
                    <!-- 
                        options：指定数据源
                        props：用来指定配置对象
                        clearable：清空选中
                        change-on-select：允许选中任意一级的选项
                        v-model: 当级联选择器选择后，将对应的值赋值给谁。
                    -->
                    <el-cascader v-model="selectedKeys" :options="parentCateList" :props="cascaderProps" clearable
                        size="small" @change="handleChange"></el-cascader>
                </el-col>
            </el-row>

            <!-- 商品分类对应的参数 -->
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="动态参数" name="many" :disabled="isBtnDisabled">
                    <!-- 添加参数的按钮 -->
                    <el-button type="primary" size="mimi">添加参数</el-button>

                    <!-- 动态参数表格 -->
                    <el-table :data="manyTableData" border stripe>
                        <!-- 展开行 -->
                        <el-table-column type="expand" width="50">
                        </el-table-column>
                        <!-- 索引列 -->
                        <el-table-column type="index"></el-table-column>
                        <el-table-column label="参数名称" prop="attr_name"></el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button type="primary" icon="el-icon-edit">编辑</el-button>
                                <el-button type="danger" icon="el-icon-delete">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="静态属性" name="only" :disabled="isBtnDisabled">
                    <!-- 添加属性的按钮 -->
                    <el-button type="primary" size="mimi">添加属性</el-button>

                    <!-- 添加属性表格 -->
                    <el-table :data="onlyTableData" border stripe>
                        <!-- 展开行 -->
                        <el-table-column type="expand" width="50">
                        </el-table-column>
                        <!-- 索引列 -->
                        <el-table-column type="index"></el-table-column>
                        <el-table-column label="属性名称" prop="attr_name"></el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button type="primary" icon="el-icon-edit">编辑</el-button>
                                <el-button type="danger" icon="el-icon-delete">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>

            <!-- 添加分类的对话宽 -->
            <el-dialog title="添加商品分类" :visible.sync="centerDialogVisible" width="50%" center @close="dialogClose">
                <!-- 主体内容 -->
                <!-- 操作按钮 -->
                <span slot="footer" class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addCate">确 定</el-button>
                </span>
            </el-dialog>
        </el-card>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                // 父级分类的列表 --- 商品分类的数据源
                parentCateList: [],
                // 指定级联选择器的配置对象
                cascaderProps: {
                    expandTrigger: 'hover',
                    // 具体具体选中的那个属性
                    value: 'cat_id',
                    // 展示的属性
                    label: 'cat_name',
                    // 父子嵌套使用的是那个属性
                    children: "children",
                },
                // 选中的父级分类的id数组
                selectedKeys: [],
                // 用于控制标签页的展示项
                activeName: "many",
                // 动态参数的数据
                manyTableData: [],
                // 静态属性的数据
                onlyTableData: [],
                // 对话框的展开和隐藏
                centerDialogVisible: false,

            }
        },
        created() {
            this.getGoodsCate();
        },
        methods: {
            // 获取商品分类数据
            async getGoodsCate() {
                var {
                    data: res
                } = await this.$http.get("categories", {
                    params: this.queryInfo
                })
                console.log('商品分类信息：', res);

                if (res.meta.status != 200) {
                    return this.$message.error(res.meta.msg);
                } else {
                    // 把数据列表赋值给tableData
                    this.parentCateList = res.data;
                    // 为总数据条数赋值
                    // this.total = res.data.total;
                    return this.$message.success(res.meta.msg);
                }
            },
            // 级联选择器：如果不是选择第三级，则清空
            async handleChange() {
                if (this.selectedKeys.length !== 3) {
                    console.log('级联选择器的结果：', this.selectedKeys)
                    return this.selectedKeys = []
                }
                console.log('级联选择器的结果：', this.selectedKeys)

                // 根据所选分类的Id，和当前所处的面板，获取对应的参数
                this.getParameData();
            },
            // 选择标签页触发
            handleClick() {
                // 根据所选分类的Id，和当前所处的面板，获取对应的参数
                this.getParameData();
            },
            //  获取参数数据
            async getParameData() {
                // 根据所选分类的Id，和当前所处的面板，获取对应的参数
                var {
                    data: res
                } = await this.$http.get(`categories/${this.cateId}/attributes`, {
                    params: {
                        sel: this.activeName
                    }
                })
                console.log('分类对应的参数信息：', res)
                if (res.meta.status != 200) {
                    return this.$message.error(res.meta.msg); // 失败
                }
                this.$message.success(res.meta.msg); // 成功

                if (this.activeName === "many") {
                    this.manyTableData = res.data;
                } else {
                    this.onlyTableData = res.data;
                }

            },
            dialogClose(){
                
            }
        },
        computed: {
            // 如果按钮需要被禁用，则返回true，否则返回false
            isBtnDisabled() {
                if (this.selectedKeys.length !== 3) {
                    return true
                }
                return false
            },
            // 当前选中的三级分类的id
            cateId() {
                if (this.selectedKeys.length === 3) {
                    return this.selectedKeys[2]
                }
                return null;
            }
        }
    }
</script>
<style scoped>
    .cat_opt {
        margin: 15px 0;
    }

    .el-card {
        width: 100%;
        margin-top: 10px;
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15);
    }
</style>